<template>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <tabs :titleary="titleary" @select="selectmsg"></tabs>
    
    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 头部横幅图片 -->
      <div class="header-banner">
        <img src="../assets/heard(3).png" alt="云顶之弈横幅" />
      </div>
      
      <!-- 面包屑导航 -->
      <!-- <div class="breadcrumb-section">
        <img src="../assets/main.png" alt="" />
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>云顶之弈</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: current.path }">
            {{ current.name }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
      
      <!-- 内容区域 -->
      <div class="content-area">
        <div class="router-content">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
      
      <!-- 底部图片 -->
      <div class="footer-banner">
        <img src="../assets/footer.png" alt="底部横幅" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { states } from "../utils/states";
import { useRouter } from "vue-router";
import { reactive, toRefs, watch } from "vue";
import tabs from "../components/tabs.vue";
import { ArrowRight } from '@element-plus/icons-vue';

//定义路由器对象router
const router = useRouter();

//类别 - 添加首页选项
const titleary = reactive(["首页", "英雄", "装备", "羁绊", "海克斯符文"]);

// 监听路由变化，确保Tabs组件与当前路由同步
const currentRoute = router.currentRoute;
watch(() => currentRoute.value.path,
  (newPath) => {
    // 根据当前路径设置正确的选中项
    if (newPath === "/home") {
      states.current = {
        path: "/home",
        name: "首页",
      };
    } else if (newPath === "/hero") {
      states.current = {
        path: "/hero",
        name: "英雄",
      };
    } else if (newPath === "/equip") {
      states.current = {
        path: "/equip",
        name: "装备",
      };
    } else if (newPath === "/bond") {
      states.current = {
        path: "/bond",
        name: "羁绊",
      };
    } else if (newPath === "/rune"){
      states.current = {
        path: "/rune",
        name: "符文",
    };
    } 
  }, 
  { immediate: true } // 立即执行一次，确保初始状态正确
);

const selectmsg = (index) => {
  if (index == 0) {
    //首页
    states.current = {
      path: "/home",
      name: "首页",
    };
    router.push({ path: "/home" });
  } else if (index == 1) {
    //英雄
    states.current = {
      path: "/hero",
      name: "英雄",
    };
    router.push({ path: "/hero" });
  } else if (index == 2) {
    //物品页
    states.current = {
      path: "/equip",
      name: "装备",
    };
    router.push({ path: "/equip" });
  }else if(index == 3){
    //召唤师技能
    states.current = {
      path: "/bond",
      name: "羁绊",
    };
    router.push({ path: "/bond" });
  }else if(index == 4){
    //符文页
    states.current = {
      path: "/rune",
      name: "海克斯符文",
    };
    router.push({ path: "/rune" });
  }
};

const { current } = toRefs(states);
</script>

<style scoped>
.main-container {
  min-height: 100vh;
  background-image: url('../assets/heard(2).png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.main-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1px);
}

.content-wrapper {
  padding-top: 0;
  padding-bottom: 120px; /* 为固定底部留出空间 */
  position: relative;
  z-index: 1;
}

.header-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: none; /* 隐藏原有的横幅图片 */
}

.header-banner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.breadcrumb-section {
  height: 80px;
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 20px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid rgba(0, 163, 131, 0.3);
}

.breadcrumb-section img {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.breadcrumb-section .el-breadcrumb {
  color: #ffffff;
}

.breadcrumb-section :deep(.el-breadcrumb__item) {
  color: #ffffff;
}

.breadcrumb-section :deep(.el-breadcrumb__item .el-breadcrumb__inner) {
  color: #ffffff;
}

.breadcrumb-section :deep(.el-breadcrumb__item .el-breadcrumb__inner:hover) {
  color: #00a383;
}

.content-area {
  margin: 20px;
  padding: 0;
}

.router-content {
  min-height: 500px;
}

.footer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.footer-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-banner img {
    height: 250px;
  }
  
  .breadcrumb-section {
    margin-left: 10px;
    margin-right: 10px;
    padding: 0 15px;
  }
  
  .content-area {
    margin: 10px;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .header-banner img {
    height: 200px;
  }
  
  .breadcrumb-section {
    height: 60px;
    font-size: 12px;
  }
  
  .content-area {
    padding: 0;
  }
}
</style>